
let name=""

$.ajax({
    url:"/getData/getWeek",
    async:false,
    data:{name:name},
    type:"POST",
    success : function(data) {

// x坐标数据

        let xArr= []


// 折线数据
        let shuju= []


        for (const obj of data) {

            console.log(obj.time)
            xArr.push(obj.time)
            console.log(obj.data)
            shuju.push(obj.data)

        }

        console.log(data)


        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'));



        let option = {

            backgroundColor: 'rgba(0,0,0,0)',    //['#ff0000','#00ff00', '#0000ff', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

            title: {
                text: '周走势图',
                /*  subtext: '模拟数据',*/
                x: 'center'    //标题居中
            },

            legend: {
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'horizontal',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'left',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: 'top',
                data: ['每周']
            },

            //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
            grid: {
                top: '16%',   // 等价于 y: '16%'
                left: '3%',
                right: '5%',
                bottom: '10%',
                containLabel: true
            },

            // 提示框
            tooltip: {
                trigger: 'axis'
            },

            //工具框，可以选择
            toolbox: {
                feature: {
                    saveAsImage: {} //下载工具
                }
            },

            xAxis: {
                name: '每周',
                type: 'category',
                axisLine: {
                    lineStyle: {
                        // 设置x轴颜色
                        color: '#912CEE'
                    }
                },
                // 设置X轴数据旋转倾斜
                axisLabel: {
                    rotate: 0, // 旋转角度
                    interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
                },
                // boundaryGap值为false的时候，折线第一个点在y轴上
                boundaryGap: false,
                data: xArr,
            },

            yAxis: {
                name: '数值',
                type: 'value',
                min:0, // 设置y轴刻度的最小值
                max:100,  // 设置y轴刻度的最大值
                splitNumber:20,  // 设置y轴刻度间隔个数
                axisLine: {
                    lineStyle: {
                        // 设置y轴颜色
                        color: '#912CEE'
                    }
                },
            },

            series: [

                {
                    name: '每周',
                    data:  shuju,
                    type: 'line',
                    // 设置折线上圆点大小
                    // 设置拐点为实心圆
                    //  symbol:'circle',
                    symbolSize:10,
                    itemStyle:{
                        normal:{
                            // 拐点上显示数值
                            label : {
                                show: true
                            },
                            borderColor:'red',  // 拐点边框颜色
                            lineStyle:{
                                width:2,  // 设置线宽
                                type:'solid' , //'dotted'虚线 'solid'实线
                                color: 'black'
                            }
                        }
                    }
                },


            ],

            color: ['red', '#FF9F7F','#FFD700'],
            dataZoom: [
                {
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    handleSize: 20,//滑动条的 左右2个滑动条的大小
                    height: 8,//组件高度
                    top:700,                         //滑动条上下位置调节
                    left: 30, //左边的距离
                    right: 40,//右边的距离
                    bottom: 30,//右边的距离
                    handleColor: '#ddd',//h滑动图标的颜色
                    handleStyle: {
                        borderColor: "#cacaca",
                        borderWidth: "1",
                        shadowBlur: 2,
                        background: "#ddd",
                        shadowColor: "#ddd",
                    },
                    fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                        //给第一个设置0，第四个设置1，就是垂直渐变
                        offset: 0,
                        color: '#1eb5e5'
                    }, {
                        offset: 1,
                        color: '#5ccbb1'
                    }]),
                    backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
                    showDataShadow: false,//是否显示数据阴影 默认auto
                    showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                    handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                    filterMode: 'filter',
                },
                //下面这个属性是里面拖到
                {
                    type: 'inside',
                    show: true,
                    xAxisIndex: [0],
                    start: 1,
                    end: 100
                }
            ],
        };
// 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


    },
    error : function() {
        console.log('ajax获取数据失败')
    }
});




